<script lang="ts" setup>
import { ElForm } from 'element-plus';
import { FormPropsType, FormItemProps } from './Form';
import FormItemVue from './FormItem.vue';

const isFormItemVisible = (field: FormItemProps<FormData>): boolean => {
  if (typeof field.visible === 'function') {
    return field.visible();
  }
  return field.visible !== false;
};
const { component, model, events, fields }: FormPropsType = defineProps([
  'component',
  'model',
  'events',
  'fields',
]);
const form = ref(null as null | typeof ElForm);
defineExpose({
  form,
});
</script>

<template>
  <el-form v-bind="component || {}" ref="form" :model="model" class="form" v-on="events || {}">
    <template v-for="(field, i) in fields">
      <template v-if="isFormItemVisible(field)">
        <form-item-vue :key="i" :field="field" :model="model" />
      </template>
    </template>
    <slot />
  </el-form>
</template>
